<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <script src="../js/55ac9a860001a6c500000000.js"></script>
    <!--<script src="http://img.mukewang.com/down/55ac9a860001a6c500000000.js"></script>-->
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style-type: none;
        }
        /*主体部分*/
        #content {
            width    : 60%;
            height   : 60%;
            top      : 20%;
            left     : 20%;
            overflow : hidden;
            position : absolute;
            border   : 1px solid #ccc;
        }

        .content-wrap {
            position: relative;
        }
        .content-wrap > li {
            width: 100%;
            height: 100%;
            background: #CAE1FF;
            color: red;
            float: left;
            overflow: hidden;
            position: relative;
        }
        li:nth-child(2) {
            background: #9BCD9B;
        }

        li:nth-child(3) {
            background: yellow;
        }

    </style>
</head>

<body>
<div id='content'>
    <ul class='content-wrap'>
        <!-- 第一副画面 -->
        <li> 页面1 </li>
        <!-- 第二副画面 -->
        <li> 页面2 </li>
        <!-- 第三副画面 -->
        <li> 页面3 </li>
    </ul>
</div>
<script type="text/javascript">
    var container = $("#content");
    // 获取第一个子节点
    var element = container.find(":first");
    // li页面数量
    var slides = element.find("li");
    // 获取容器尺寸
    var width = container.width();
    var height = container.height();
    // 设置li页面总宽度
    element.css({
        width  : (slides.length * width) + 'px',
        height : height + 'px'
    });
    // 设置每一个页面li的宽度
    $.each(slides, function(index) {
        var slide = slides.eq(index); //获取到每一个li元素
        //
        slide.css({
            width : width+ 'px',
            //height : heigt+'px'
        })
    });
</script>
</body>

</html>
